<template>
    <div class="Breadcrumb">
        <el-breadcrumb separator="/" class="biaoqian">
            <el-breadcrumb-item :to="{ path: '/teacherInterface' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>考务管理</el-breadcrumb-item>
            <el-breadcrumb-item>考核方式申请</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
    </div>
    <div class="showUnTicketInfo">
        <div class='box'>
            <el-form :model="queryForm" size="middle" :inline="true" style="padding-left: 20px;  ">
                <el-form-item label="课程名称">
                    <el-input v-model="queryForm.courseName" placeholder="请输入课程名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="审批人">
                    <el-input v-model="queryForm.approverName" placeholder="请输入审批人" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="审批状态">
                    <el-select v-model="queryForm.approvalStatus" placeholder="请输入审批状态" clearable style="width: 240px">
                        <el-option v-for="e in approvalStatus" :key="e" :value="e.value" :label="e.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button @click="handleSearch" type="primary" :icon="Search" size="mini">搜索</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button @click="handleReset" :icon="Refresh" size="mini">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" :icon="Plus" size="mini" @click="handleAdd">添加申请</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="box-content">
            <el-table :data="dataList" height="450" style="width: 100%">
                <el-table-column prop="courseName" label="课程名称" align="center" />
                <el-table-column prop="applicantName" label="申请人" align="center" />
                <el-table-column prop="applicationDate" label="申请时间" align="center" />
                <el-table-column prop="assessmentMethod" label="考核方式" align="center" />
                <el-table-column prop="reason" label="申请原因" align="center" />
                <el-table-column prop="approvalStatus" label="审批状态" align="center">
                </el-table-column>
                <el-table-column prop="approvalDate" label="审批日期" align="center">
                </el-table-column>
                <el-table-column prop="approvalOpinion" label="审批意见" align="center">
                </el-table-column>
                <el-table-column prop="approverName" label="审批人" align="center">
                </el-table-column>
                <el-table-column label="操作" width="100px" align="center">
                    <template #default="scope">
                        <el-button v-if="scope.row.approvalStatus==='未审批'" @click="handleEdit(scope.row)" :icon="Edit" size="mini"
                            style="width: 5px; height: 1px;  "></el-button>
                        <el-popconfirm title="确定删除吗" confirm-button-text="确定" cancel-button-text="取消" icon="InfoFilled"
                            @confirm="handleDelete(scope.row)" hide-after="0">
                            <template #reference>
                                <el-button v-if="scope.row.approvalStatus==='未审批'" :icon="Delete" size="mini" style="width: 1px; height: 1px; "></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination layout="prev, pager, next" :total=pageTotal :page-size="pageSize"
                    v-model:current-page="curPage" />
            </div>
        </div>
<ExamMethodApplicationDialog :showDialog="showDialog" @dialogClosed="handleDialogClosed" :dialogType="dialogType"
:applyId="applyId" :editForm="editForm" ></ExamMethodApplicationDialog>
    </div>
</template>

<script>
import api from '@/api/api';
import ExamMethodApplicationDialog from '@/components/TeacherComponents/ExamMethodApplicationDialog.vue';
import { Delete, Edit } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

export default {
    components:{
        ExamMethodApplicationDialog
    },
    mounted() {
        this.getData()
    },
    data() {
        return {
            dataList: [],
            curPage: 1,
            pageSize: 5,
            pageTotal: 0,
            showDialog: false,
            queryForm: {
                'courseName': '',
                'approverName': '',
                'approvalStatus': '',
            },
            approvalStatus: [
                { value: '0', label: '批准' },
                { value: '1', label: '驳回' },
                { value: '2', label: '未审批' },
            ],
            dialogType: 'add',
            applyId: '',
            editForm: '',
        }
    },
    methods: {
        getData() {
            api.exam_method_application.page_by_id(this.curPage, this.pageSize, sessionStorage.getItem('userid'),
                this.queryForm.courseName, this.queryForm.approverName, this.queryForm.approvalStatus)
                .then((res) => {
                    this.dataList = res.data.data.records
                    this.pageTotal = res.data.data.total
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        handleAdd() {
            this.dialogType = 'add'
            this.showDialog = true
        },
        handleDialogClosed() {
            this.showDialog = false
            this.getData()
        },
        handleSearch() {
            this.getData()
        },
        handleReset() {
            this.queryForm.courseName = ''
            this.queryForm.approverName = ''
            this.queryForm.approvalStatus = ''
            this.getData()
        },
        handleEdit(row) {
            this.editForm = JSON.parse(JSON.stringify(row))
            this.applyId = row.id
            this.dialogType = 'edit'
            this.showDialog = true
        },
        handleDelete(row) {
            api.exam_method_application.del(row.id).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success'
                })
                this.getData()
            }).catch((err) => {
                console.log(err)
            })
        }
    },
    watch: {
        curPage(newValue, oldValue) {
            this.getData()
        }
    },
    computed: {
        Edit() {
            return Edit
        },
        Delete() {
            return Delete
        }
    }
}
</script>